<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>黑龙江多CA监管系统</el-breadcrumb-item>
            <el-breadcrumb-item>轮候分配统计</el-breadcrumb-item>
        </el-breadcrumb>
        <ScrollView>
            <el-main>
                <div
                  v-loading.fullscreen="loading"
                  element-loading-background="rgba(255, 255, 255, 0.1)"
                  element-loading-text="数据加载中 .."
                  class="container"
                >
                    <div
                      class="flex-h"
                      style="height: 90px;border-bottom: 1px solid #DCDCDC;margin-bottom: 20px"
                    >
                        <span style="margin-right: 10px">CA机构</span>
                        <el-input
                           v-model="searchInput"
                           class="search-input"
                           style="width: 240px;margin-right: 22px"
                           placeholder="请输入CA机构"
                           clearable
                        />
                        <el-button
                                type="primary"
                                @click="getListData"
                        >
                            查询
                        </el-button>
                    </div>
                    <TablePublicComponent
                            ref="table"
                            :data="tableData"
                            :total="total"
                            :request="getListData"
                    >
                        <el-table-column
                                prop="dict_lable"
                                label="CA机构"
                        />
                        <el-table-column
                                prop="assignNum"
                                label="分配次数"
                        />
                        <el-table-column
                                prop="acceptNum"
                                label="受理数量"
                        />
                        <el-table-column
                                prop="assignTime"
                                :formatter="formatDate"
                                label="配置时间"
                        />
                        <el-table-column
                                fixed="right"
                                label="操作"
                                class="option"
                                align="center"
                        >
                            <template slot-scope="scope">
                                <el-button
                                        type="text"
                                        @click="handleClick(scope.row)"
                                >
                                    分配记录
                                </el-button>
                            </template>
                        </el-table-column>
                        <template v-slot:empty>
                            暂无数据
                        </template>
                    </TablePublicComponent>
                </div>
            </el-main>
        </ScrollView>
    </div>
</template>

<script>
    import TablePublicComponent from '@/components/quick/TablePublicComponent.vue'
    import caCombinationListApi from '@/api/regulatoryStatistics/caCombinationList'
    import moment from 'moment'
    export default {
        name: 'CaCombinationList',
        components: {
            TablePublicComponent,
        },
        data() {
            return {
                loading: false,
                caId: '',
                caName: '',
                searchInput: '',
                tableData: [],
                total: 0
            }
        },
        methods: {
            async getListData() {
                this.loading = true
                try {
                    const { data: res } = await caCombinationListApi.caCombinationList({
                        caName: this.searchInput,
                        ...this.$refs.table.page
                    })
                    // this.$handleError(res)
                    if (res.code === 200) {
                        this.tableData = res.data.list
                        this.total = res.data.total
                        if (res.data.total === 0) {
                            this.nodata = true
                        }
                    }
                } catch (e) {
                    console.log(e)
                } finally {
                    this.loading = false
                }
            },
            handleClick(row) {
                this.caId = row.ca
                this.caName = row.dict_lable
                console.log(row)
            },
            formatDate(row, column, cellValue) {
                return moment(cellValue).format('YYYY-MM-DD HH:mm')
            }
        }
    }
</script>

<style scoped>
    .container{
        padding: 0 20px;
    }
</style>
